<template>
  <div>
    <p>当前位置：生产计划管理模块  生产计划生成</p>
    <div class="plan-management">
      <div class="main-buttons">
        <button @click="viewPage('viewPlan')">计划查看</button>
        <button @click="viewPage('adjustParams')">参数调整</button>
        <button @click="viewPage('generatePlan')">计划生成</button>
      </div>

      <div v-if="currentView === 'viewPlan'">
        <div class="buttons">
          <button @click="viewPlan('production')">产线生产计划</button>
          <button @click="viewPlan('station')">站位生产计划</button>
          <button @click="viewPlan('personnel')">人员生产计划</button>
          <button @click="viewPlan('material')">物料需求表</button>
        </div>

        <div class="plan-chart">
         <h3> 产线生产计划</h3>
             <!-- <GanttChart :tasks="line_tasks" class="gantt-chart-container" /> -->
          <div class="plan-selector">  
            <button @click="prevPlan" :disabled="currentPlan === 1">←</button>  
            <span>生产计划切换</span>  
            <button @click="nextPlan" :disabled="currentPlan === 3">→</button>  
          </div>  
          <div class="model-info">
            <h1>生产计划：{{ currentPlan }}</h1>
          </div>
          <div class="plan-image">  
            <img :src="getPlanImageUrl(currentPlan)" alt="Plan Image">  
          </div>  
        </div>
        
  <button @click="showdatatable_line">查看数据表</button>

            <ModalModalline
            :visible="isModalVisible_line" 
            :workerline="selecteddata_line" 
       
            @close="isModalVisible_line = false"
          />



        <!-- <div class="plan-controls">
          <label>
            <input type="radio" v-model="selectedLine" value="A"> 产线A
          </label>
          <label>
            <input type="radio" v-model="selectedLine" value="B"> 产线B
          </label>
          <label>
            <input type="radio" v-model="selectedLine" value="C"> 产线C
          </label>

        </div> -->



      </div>

   <div v-if="currentView === 'viewStationPlan'">
        <div class="buttons">
          <button @click="viewPlan('production')">产线生产计划</button>
          <button @click="viewPlan('station')">站位生产计划</button>
          <button @click="viewPlan('personnel')">人员生产计划</button>
          <button @click="viewPlan('material')">物料需求表</button>
        </div>

        <div class="plan-chart">
          <h3>站位生产计划</h3>
          <div class="batch-selector">  
            <button @click="prevBatch" :disabled="currentBatch === 1">←</button>  
            <span>批次切换</span>
            <button @click="nextBatch" :disabled="currentBatch === 3">→</button>  
          </div> 
          <div class="model-info">  
          <h1>机型：AC20, 批次：{{ currentBatch }} </h1> 
      
          </div>   
          <div class="landscape-image">  
           <img :src="getLandscapeImageUrl(currentBatch)" alt="Batch Landscape">  
          </div>  
          <!-- <h3>机型AC313A 批次1</h3> -->
              <!-- <GanttChart :tasks="tasks" class="gantt-chart-container" /> -->

        </div>

  
      
              <button @click="showdatatable">查看数据表</button>

   
         
          <!-- <ModalModalp 
            :visible="isModalVisible_p" 
            :workerp="selecteddata_p" 
       
            @close="isModalVisible_p = false"
          /> -->
                 
      </div>
  
         <div v-if="currentView === 'viewPersonnelPlan'">
        <div class="buttons">
          <button @click="viewPlan('production')">产线生产计划</button>
          <button @click="viewPlan('station')">站位生产计划</button>
          <button @click="viewPlan('personnel')">人员生产计划</button>
          <button @click="viewPlan('material')">物料需求表</button>
        </div>

        <div class="plan-chart">
          <h3>人员生产计划</h3>
     <div class="table-container">
  <table class="custom-table">
    <thead>
      <tr>
        <th>工号</th>
        <th>姓名</th>
        <th>技能等级</th>
        <th>所在岗位</th>
        <th>所在工位</th>
        <th>所在站位</th>
        <th>所在产线</th>
        <th>工作计划</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(worker, index) in currentData" :key="index">
        <td>{{ worker.number }}</td>
        <td>{{ worker.name }}</td>
        <td>{{ worker.grade }}</td>
        <td>{{ worker.position1 }}</td>
        <td>{{ worker.position2 }}</td>
        <td>{{ worker.position3 }}</td>
        <td>{{ worker.line }}</td>
        <td>
         
          <button @click="showdetailedinformation(index + (currentPage - 1) * itemsPerPage)">查看</button>
            <ModalModal 
      :visible="isModalVisible" 
      :worker="selectedWorker" 
      :tasks="tasks"
      @close="isModalVisible = false"
    />
        </td>
      </tr>
    </tbody>
  </table>
</div>

        <div class="pagination">
          <button @click="firstPage">首页</button>
          <button @click="prevPage">上一页</button>
          <span>{{ currentPage }}</span>
          <button @click="nextPage">下一页</button>
          <button @click="lastPage">尾页</button>
          <span>共{{ totalPages }}页</span> <!-- 显示总页数 -->
                 <button @click="exportToExcel(currentData)">导出数据</button>
        </div>
        <div>
          <label>
            每页显示条数:
            <input type="number" v-model="userItemsPerPage" >
          </label>
        </div>
        <div>
          <label>
            跳转到页:
            <input type="number" v-model="userInputPage">
            <button @click="jumpToPage">跳转</button>
          </label>
        </div>
  
      </div>
      </div>


      
         <div v-if="currentView === 'viewMaterialPlan'">
        <div class="buttons">
          <button @click="viewPlan('production')">产线生产计划</button>
          <button @click="viewPlan('station')">站位生产计划</button>
          <button @click="viewPlan('personnel')">人员生产计划</button>
          <button @click="viewPlan('material')">物料需求表</button>
        </div>
       <div class="plan-chart">
          <h3>物料需求表</h3>
     <div class="table-container">
  <table class="custom-table">
    <thead>
      <tr>
        <th>序号</th>
        <th>物料名称</th>
        <th>物料编号</th>
        <th>计划所需时间</th>
        <th>最晚送达时间</th>
        <th>生产单位</th>

      </tr>
    </thead>
    <tbody>
      <tr v-for="(worker, index) in currentData" :key="index">
        <td>{{ index + (currentPage - 1) * itemsPerPage+1}}</td>
        <td>{{ worker.name }}</td>
        <td>{{ worker.number }}</td>
        <td>{{ worker.plannedtime }}</td>
        <td>{{ worker.latesttime }}</td>
              <td>{{ worker.unit }}</td>
      </tr>
    </tbody>
  </table>
</div>

        <div class="pagination">
          <button @click="firstPage">首页</button>
          <button @click="prevPage">上一页</button>
          <span>{{ currentPage }}</span>
          <button @click="nextPage">下一页</button>
          <button @click="lastPage">尾页</button>
          <span>共{{ totalPages }}页</span> <!-- 显示总页数 -->
          <button @click="exportToExcel(data)">导出数据</button>
        </div>
        <div>
          <label>
            每页显示条数:
            <input type="number" v-model="userItemsPerPage" @change="updateCurrentData">
          </label>
        </div>
        <div>
          <label>
            跳转到页:
            <input type="number" v-model="userInputPage">
            <button @click="jumpToPage">跳转</button>
          </label>
        </div>

      </div>
      </div>


        <div v-if="currentView === 'adjustParams'">
      <h3>站位参数调整</h3>
      <div class="table-container">
        <table class="custom-table">
          <thead>
            <tr>
              <th>站位名称</th>
              <th>站位编号</th>
              <th>站位人数</th>
              <th>入缓存区容量</th>
              <th>出缓存区容量</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(param, index) in currentData" :key="index">
              <td>{{ index+1 }}</td>
              <td>
                <input v-if="param.editable" v-model="param.name">
                <span v-else>{{ param.name }}</span>
                </td>
              <td>
                <input v-if="param.editable" v-model="param.positionnumber">
                <span v-else>{{ param.positionnumber }}</span>
              </td>
              <td>
                <input v-if="param.editable" v-model="param.enterspace">
                <span v-else>{{ param.enterspace }}</span>
              </td>
              <td>
                <input v-if="param.editable" v-model="param.exitspace">
                <span v-else>{{ param.exitspace }}</span>
              </td>
              <td>
                <button v-if="!param.editable" @click="editParam(index + (currentPage - 1) * itemsPerPage)">编辑</button>
                <button v-if="param.editable" @click="saveParam(index + (currentPage - 1) * itemsPerPage)">保存</button>
              </td>
            </tr>
          </tbody>
        </table>
     
    
      </div>
        <div class="pagination">
          <button @click="firstPage">首页</button>
          <button @click="prevPage">上一页</button>
          <span>{{ currentPage }}</span>
          <button @click="nextPage">下一页</button>
          <button @click="lastPage">尾页</button>
          <span>共{{ totalPages }}页</span> <!-- 显示总页数 -->
        </div>
        <div>
          <label>
            每页显示条数:
            <input type="number" v-model="userItemsPerPage" @change="updateCurrentData">
          </label>
        </div>
        <div>
          <label>
            跳转到页:
            <input type="number" v-model="userInputPage">
            <button @click="jumpToPage">跳转</button>
          </label>
        </div>
        <button @click="fetchData">加载数据库数据</button>
        <button @click="submitData">提交数据库数据</button>
      </div>

      <div v-if="currentView === 'generatePlan'">
        <h3>计划生成</h3>
        <div class="sub-buttons">
          <button @click="viewSubPage('subpagerenyuan')">确认人员</button>
          <button @click="viewSubPage('subpagezhanwei')">确认站位信息</button>
          <button @click="viewSubPage('subpageshebei')">确认设备信息</button>
          <button @click="viewSubPage('subpagezhiliang')">确认质量信息</button>
          <button @click="viewSubPage('subpagewuliao')">确认物料信息</button>
          <button @click="viewSubPage('subpagejindu')">确认进度</button>
          <button @click="viewSubPage('subpagekuadu')">选择计划跨度</button>
        </div>

        <div v-if="currentSubView === 'subpagerenyuan'">
          <h4>确认人员</h4>
          <div class="table-container">
            <table class="custom-table">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>工号</th>
                  <th>姓名</th>
                  <th>在岗状态</th>
                  <th>工作状态</th>
                  <th>技能等级</th>
                  <th>所在岗位</th>
                  <th>所在工位</th>
                  <th>所在站位</th>
                  <th>所在产线</th>
                  <th>工作计划</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in currentData" :key="index">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.gonghao }}</td>
                  <td>{{ item.xingming }}</td>
                  <td>{{ item.zaigangzhuangtai }}</td>
                  <td>{{ item.gongzuozhuangtai }}</td>
                  <td>{{ item.jinengdengji }}</td>
                  <td>{{ item.suozaigangwei }}</td>
                  <td>{{ item.suozaigongwei }}</td>
                  <td>{{ item.suozaizhanwei }}</td>
                  <td>{{ item.suozaichanxian }}</td>
                  <td>
                      <button @click="showdetailedinformation(index + (currentPage - 1) * itemsPerPage)">查看</button>
                            <ModalModal 
      :visible="isModalVisible" 
      :worker="selectedWorker" 
      :tasks="tasks"
      @close="isModalVisible = false"
    />
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="pagination">
            <button @click="firstPage">首页</button>
            <button @click="prevPage">上一页</button>
            <span>{{ currentPage }}</span>
            <button @click="nextPage">下一页</button>
            <button @click="lastPage">尾页</button>
            <span>共{{ totalPages }}页</span> <!-- 显示总页数 -->
          </div>
          <div>
            <label>
              每页显示条数:
              <input type="number" v-model="userItemsPerPage" @change="updateCurrentData">
            </label>
          </div>
          <div>
            <label>
              跳转到页:
              <input type="number" v-model="userInputPage">
              <button @click="jumpToPage">跳转</button>
            </label>
          </div>
        </div>

        <div v-if="currentSubView === 'subpagezhanwei'">
          <h4>确认站位信息</h4>
          <div class="table-container">
            <table class="custom-table">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>站位名称</th>
                  <th>站位编号</th>
                  <th>装配周期</th>
                  <th>站位容纳最大人数</th>
                  <th>站位理想人数</th>
                  <th>前置站位</th>
                  <th>后置站位</th>
                  <th>装配指令</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in currentData" :key="index">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.mingcheng }}</td>
                  <td>{{ item.bianhao }}</td>
                  <td>{{ item.zhouqi }}</td>
                  <td>{{ item.zuidarenshu }}</td>
                  <td>{{ item.lixiangrenshu }}</td>
                  <td>{{ item.qianzhizhanwei }}</td>
                  <td>{{ item.houzhizhanwei }}</td>
                  <td>
                      <button @click="showdetailedinformationa(index + (currentPage - 1) * itemsPerPage)">查看</button>
                            <ModalModala 
      :visible="isModalVisible_a" 
      :worker="selectedWorker_a" 
      :tasks="tasks"
      @close="isModalVisible_a = false"
    />
    
  

                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="pagination">
            <button @click="firstPage">首页</button>
            <button @click="prevPage">上一页</button>
            <span>{{ currentPage }}</span>
            <button @click="nextPage">下一页</button>
            <button @click="lastPage">尾页</button>
            <span>共{{ totalPages }}页</span> <!-- 显示总页数 -->
          </div>
          <div>
            <label>
              每页显示条数:
              <input type="number" v-model="userItemsPerPage" @change="updateCurrentData">
            </label>
          </div>
          <div>
            <label>
              跳转到页:
              <input type="number" v-model="userInputPage">
              <button @click="jumpToPage">跳转</button>
            </label>
          </div>
        </div>

        <div v-if="currentSubView === 'subpageshebei'">
          <h4>确认设备信息</h4>
          <div class="table-container">
            <table class="custom-table">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>设备名称</th>
                  <th>设备型号</th>
                  <th>所在产线</th>
                  <th>责任人</th>
                  <th>设备规格</th>
                  <th>设备厂商</th>
                  <th>所属站位</th>
                  <th>设备编号</th>
                  <th>设备运行状态</th>
                  <th>异常持续时间</th>
                  <th>异常描述</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in currentData" :key="index">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.mingcheng }}</td>
                  <td>{{ item.xinghao }}</td>
                  <td>{{ item.chanxian }}</td>
                  <td>{{ item.zerenren }}</td>
                  <td>{{ item.guige }}</td>
                  <td>{{ item.changshang }}</td>
                  <td>{{ item.zhanwei }}</td>
                  <td>{{ item.bianhao }}</td>
                  <td>{{ item.zhuangtai }}</td>
                  <td>{{ item.yichangshijian }}</td>
                  <td>{{ item.yichangmiaoshu }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="pagination">
            <button @click="firstPage">首页</button>
            <button @click="prevPage">上一页</button>
            <span>{{ currentPage }}</span>
            <button @click="nextPage">下一页</button>
            <button @click="lastPage">尾页</button>
            <span>共{{ totalPages }}页</span> <!-- 显示总页数 -->
          </div>
          <div>
            <label>
              每页显示条数:
              <input type="number" v-model="userItemsPerPage" @change="updateCurrentData">
            </label>
          </div>
          <div>
            <label>
              跳转到页:
              <input type="number" v-model="userInputPage">
              <button @click="jumpToPage">跳转</button>
            </label>
          </div>
        </div>
        
        <div v-if="currentSubView === 'subpagezhiliang'">
          <h4>确认质量信息</h4>
          <div class="table-container">
            <table class="custom-table">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>所属站位</th>
                  <th>负责人</th>
                  <th>异常描述</th>
                  <th>所需时间</th>
                  <th>异常状态</th>
                  <th>异常类型</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in currentData" :key="index">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.zhanwei }}</td>
                  <td>{{ item.fuzeren }}</td>
                  <td>{{ item.yichangmiaoshu }}</td>
                  <td>{{ item.suoxushijian }}</td>
                  <td>{{ item.yichangzhuangtai }}</td>
                  <td>{{ item.yichangleixing }}</td>
      
                </tr>
              </tbody>
            </table>
          </div>
          <div class="pagination">
            <button @click="firstPage">首页</button>
            <button @click="prevPage">上一页</button>
            <span>{{ currentPage }}</span>
            <button @click="nextPage">下一页</button>
            <button @click="lastPage">尾页</button>
            <span>共{{ totalPages }}页</span> <!-- 显示总页数 -->
          </div>
          <div>
            <label>
              每页显示条数:
              <input type="number" v-model="userItemsPerPage" @change="updateCurrentData">
            </label>
          </div>
          <div>
            <label>
              跳转到页:
              <input type="number" v-model="userInputPage">
              <button @click="jumpToPage">跳转</button>
            </label>
          </div>
        </div>



          <div v-if="currentSubView === 'subpagewuliao'">
          <h4>确认物料信息</h4>
          <div class="table-container">
            <table class="custom-table">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>物料名称</th>
                  <th>物料编号</th>
                  <th>站位</th>
                  <th>是否必要件</th>
                  <th>物料状态</th>
                  <th>剩余完工时间</th>
                  <th>生产单位</th>
                  <th>加工过程</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in currentData" :key="index">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.mingcheng }}</td>
                  <td>{{ item.bianhao }}</td>
                  <td>{{ item.zhanwei }}</td>
                  <td>{{ item.shifoubiyao }}</td>
                  <td>{{ item.zhuangtai }}</td>
                  <td>{{ item.shengyushijian }}</td>
                  <td>{{ item.shengchandanwei }}</td>
            <td>
                      <button @click="showdetailedinformation(index + (currentPage - 1) * itemsPerPage)">查看</button>
                            <ModalModal 
      :visible="isModalVisible" 
      :worker="selectedWorker" 
      :tasks="tasks"
      @close="isModalVisible = false"
    />
                  </td>
      
                </tr>
              </tbody>
            </table>
          </div>
          <div class="pagination">
            <button @click="firstPage">首页</button>
            <button @click="prevPage">上一页</button>
            <span>{{ currentPage }}</span>
            <button @click="nextPage">下一页</button>
            <button @click="lastPage">尾页</button>
            <span>共{{ totalPages }}页</span> <!-- 显示总页数 -->
          </div>
          <div>
            <label>
              每页显示条数:
              <input type="number" v-model="userItemsPerPage" @change="updateCurrentData">
            </label>
          </div>
          <div>
            <label>
              跳转到页:
              <input type="number" v-model="userInputPage">
              <button @click="jumpToPage">跳转</button>
            </label>
          </div>
        </div>

        
          <div v-if="currentSubView === 'subpagejindu'">    
          <h4>确认进度信息</h4>
          <div class="table-container">
            <table class="custom-table">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>站位名称</th>
                  <th>站位编号</th>
                  <th>当前T级</th>
                  <th>当前AO</th>
                  <th>机型</th>
                  <th>当前作业批次</th>
                  <th>站位可容纳最大人数</th>
                  <th>交付节点</th>
                  <th>风险等级</th>
                  <th>进度表</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in currentData" :key="index">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.mingcheng }}</td>
                  <td>{{ item.bianhao }}</td>
                  <td>{{ item.T }}</td>
                  <td>{{ item.dangqianAO }}</td>
                  <td>{{ item.jixing }}</td>
                  <td>{{ item.dangqianpici }}</td>
                  <td>{{ item.zuidarenshu }}</td>
                  <td>{{ item.jiaofujiedian }}</td>
                  <td>{{ item.fengxiandengji }}</td>
            <td>
                      <button @click="showdetailedinformation(index + (currentPage - 1) * itemsPerPage)">查看</button>
                            <ModalModal 
      :visible="isModalVisible" 
      :worker="selectedWorker" 
      :tasks="tasks"
      @close="isModalVisible = false"
    />
                  </td>
      
                </tr>
              </tbody>
            </table>
          </div>
          <div class="pagination">
            <button @click="firstPage">首页</button>
            <button @click="prevPage">上一页</button>
            <span>{{ currentPage }}</span>
            <button @click="nextPage">下一页</button>
            <button @click="lastPage">尾页</button>
            <span>共{{ totalPages }}页</span> <!-- 显示总页数 -->
          </div>
          <div>
            <label>
              每页显示条数:
              <input type="number" v-model="userItemsPerPage" @change="updateCurrentData">
            </label>
          </div>
          <div>
            <label>
              跳转到页:
              <input type="number" v-model="userInputPage">
              <button @click="jumpToPage">跳转</button>
            </label>
          </div>
        </div>

        <div v-if="currentSubView === 'subpagekuadu'">
          <h4>选择计划跨度</h4>
            <div class="table-container">
              
                <h1>主计划表</h1>
              
            <table class="custom-table">
              <thead>
                <tr>
              <th>选择</th>
              <th>序号</th>
              <th>直升机编号</th>  
              <th>机型</th>  
              <th>批次</th>  
              <th>开始装配时间</th>  
              <th>指令交付节点</th> 
               </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in currentData" :key="index">
                <td><input type="checkbox" :value="item.id" v-model="selectedcurrentDatas" @change="selectedcurrentData(item.id)"></td>
                <td>{{ index + 1 }}</td>
                <td>{{ item.helicopterId }}</td>
                <td>{{ item.model }}</td>
                <td>{{ item.batch }}</td>
                <td>{{ item.startAssemblyTime }}</td>
                <td>{{ item.deliveryDate }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        
          <!-- <div class="table-container">
            
                <h1>月/季度计划表</h1>
              
            <table class="custom-table">
              <thead>
                <tr>
                  <th>选择</th>
                  <th>序号</th>  
                  <th>组部件编号</th>  
                  <th>工位</th>  
                  <th>批次</th>  
                  <th>开始装配时间</th>  
                  <th>指令交付节点</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(part, index) in partPlanList" :key="index"> 
                <td><input type="checkbox" :value="part.id" v-model="selectedpartPlanLists" @change="selectpartPlanList(part.id)"></td> 
                <td>{{ index + 1 }}</td>  
                <td>{{ part.componentId }}</td>  
                <td>{{ part.station }}</td>  
                <td>{{ part.batch }}</td>  
                <td>{{ part.startAssemblyTime }}</td>  
                <td>{{ part.deliveryDate }}</td>  
                </tr>  
              </tbody>
            </table>
            
         </div>  -->

          <button @click="ShowTimeSpanModal=true">选择时间跨度</button>
          <button @click="exportBOM">导出物料清单</button>
          <button @click="generateReport">生成分析报告</button>
          <div v-if="ShowTimeSpanModal" class="modal">
            <div class="modal-content">
              <span class="close" @click="ShowTimeSpanModal = false">&times;</span>
              <h2>选择生成计划的时间跨度</h2>
              <p>时间跨度：</p>
              <select v-model="selectedTimeSpan">
                <option value="week">一星期</option>
                <option value="two_weeks">两星期</option>
                <option value="month">一个月</option>
                <option value="two_months">两个月</option>
                <option value="quarter">一季度</option>
                <option value="year">一年</option>
              </select>
              <button @click="ShowTimeSpanModal = false">取消</button>
              <button @click="confirmTimeSpan">确认</button>
            </div>
          </div>

    <div class="pagination">
            <button @click="firstPage">首页</button>
            <button @click="prevPage">上一页</button>
            <span>{{ currentPage }}</span>
            <button @click="nextPage">下一页</button>
            <button @click="lastPage">尾页</button>
            <span>共{{ totalPages }}页</span> <!-- 显示总页数 -->
          </div>
          <div>
            <label>
              每页显示条数:
              <input type="number" v-model="userItemsPerPage" @change="updateCurrentData">
            </label>
          </div>
          <div>
            <label>
              跳转到页:
              <input type="number" v-model="userInputPage">
              <button @click="jumpToPage">跳转</button>
            </label>
          </div>
             
        </div>
        </div>
      </div>
    </div>
  
</template>

<style>
.modal-overlay {  
  position: fixed;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */  
  display: flex;  
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 垂直居中 */  
}  
  
/* 模态框样式 */  
.modal {  
  position: relative; /* 相对于覆盖层定位，但在这里其实不需要，因为覆盖层已经使用flex居中了 */  
  z-index: 1000; /* 确保模态框在覆盖层之上 */  
  /* 宽度和高度可以根据需要设置，或者设置为auto */  
  width: 100%; /* 示例宽度 */  
  max-width: 600px; /* 最大宽度限制 */  
  background-color: #fefefe;  
  padding: 20px;  
  border: 1px solid #888;  
   
}  
.custom-select{
   width: 700px; /* 设置下拉选择框的宽度 */  
  height: 40px; /* 可选，设置下拉选择框的高度 */  
  padding: 8px; /* 增加一些内边距 */  
  font-size: 50px; /* 字体大小 */  

}
  
/* 关闭按钮样式 */  
.close {  
  float: right;  
  font-size: 28px;  
  font-weight: bold;  
  color: #aaa;  
  cursor: pointer;  
}  
  
.close:hover,  
.close:focus {  
  color: black;  
  text-decoration: none;  
  outline: none;  
}  

.editable-input {  
  width: 50%;  
  padding: 8px;  
  box-sizing: border-box;  
} 

.plan-selector button {  
  margin: 0 10px;  
} 

.plan-image img {  
  width: 50%; /* 或者设置为具体的宽度 */  
  height: auto;  
  margin-top: 20px;  
}  

.batch-selector button {  
  margin: 0 10px;  
}  
  
.landscape-image img {  
  width: 50%; /* 或者设置为你需要的宽度 */  
  height: auto;  
  margin-top: 20px;  
}  
.plan-management {
  padding: 20px;
}

.main-buttons {
  margin-bottom: 20px;
}

.main-buttons button {
  margin-right: 10px;
}

.buttons {
  margin-bottom: 20px;
}

.buttons button {
  margin-right: 10px;
}

.plan-chart {
  margin-bottom: 20px;
}

.chart-container {
  position: relative;
  height: 200px;
  border: 1px solid #ccc;
  padding: 20px;
}

.plan-item {
  position: absolute;
  background: #e0f7fa;
  padding: 10px;
  border: 1px solid #00796b;
  border-radius: 4px;
}

.plan-controls {
  display: flex;
  align-items: center;
}

.plan-controls label {
  margin-right: 10px;
}

.plan-controls button {
  margin-left: 10px;
}

.table-container {
  margin-bottom: 20px;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
}

.custom-table th, .custom-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.pagination {
  display: flex;
  align-items: center;
}

.pagination button {
  margin: 0 5px;
}

.custom-table td input {
  width: 100%;
  box-sizing: border-box;
}
</style>



<script>
// import GanttChart from './GanttChart.vue';
import * as XLSX from 'xlsx';
import axios from 'axios';
import paginationMixin from '@/mixins/paginationMixin';
import ModalModal from './ModalModal.vue';
// import ModalModalp from './ModalModal_p.vue';
import ModalModalline from './ModalModal_line.vue';
import ModalModala from './ModalModal_a.vue';


export default {
  components:{
   
    // GanttChart,

    ModalModal,
    // ModalModalp,
    ModalModalline,
    ModalModala
  },
  mixins: [paginationMixin,
    ],
  data() {
    return {
      data:[],
      currentView: 'viewPlan',
      currentPage:1,
      currentPlan:1,
      currentBatch:1,
      itemsPerPage: 10,
      currentSubView: 'subPlan1',
        userItemsPerPage: 10,
      userInputPage: '',
      selectedLine: 'A',
       isModalVisible: false,
       isModalVisible_p:false,
       isModalVisible_line:false,
       isModalVisible_a:false,
       selectedplanDatas: [],
       selectedpartPlanlists: [],
       ShowTimeSpanModal: false, // 控制模态窗格的显示与隐藏  
       selectedTimeSpan:'week',
       // 存储用户选择的时间跨度  
       showPlanTables: false, // 控制计划表内容的显示（这里仅为示例，实际可能不需要）
       showAlert: false,
      //  linestasks:{
      //    A: [{ /* ... 产线A的任务数据 ... */ }],  
      //   B: [{ /* ... 产线B的任务数据 ... */ }],  
      //   C: [{ /* ... 产线C的任务数据 ... */ }]  
      //  },
      //  isModalVisible_line: false,  
      // selecteddata_line: null, 
      // productionPlans: ['A', 'B', 'C'], 
      // paramsas: {  
      //   name: '站位名称示例',  
      //   number: '001',  
      //   people: 10,  
      //   inCache: 50,  
      //   outCache: 30,  
      // },  
     
      planImages:[
        '/批次1.jpg',
        '/批次2.jpg',  
        '/批次3.jpg',
      ],
      landscapeImages: [  
        '/批次1.jpg' , // 批次1的风景图  
        '/批次2.jpg', // 批次2的风景图  
        '/批次3.jpg'  // 批次3的风景图  
      ]  ,
      subpagekuadu: [
        { name: 'AC313A-1', date: '2022.3.10', positionX: 0, positionY: 20 },
        { name: 'AC313A-2', date: '2022.3.20', positionX: 200, positionY: 40 },
        { name: 'AC313A-3', date: '2022.4.1', positionX: 400, positionY: 60 },
        { name: 'AC313A-4', date: '2022.4.10', positionX: 600, positionY: 80 },
        { name: 'AC313A-5', date: '2022.4.22', positionX: 800, positionY: 100 },
        { name: 'AC313A-6', date: '2022.5.14', positionX: 1000, positionY: 120 }
      ],
      params: [
        { name: '参数1', positionnumber: '值1', peoplenum:'', enterspace:'',exitspace:'', editable: false },
        { name: '参数2', positionnumber: '值2', peoplenum:'', enterspace:'',exitspace:'', editable: false },
        { name: '参数3', positionnumber: '值3', peoplenum:'', enterspace:'',exitspace:'', editable: false },
        { name: '参数4', positionnumber: '值4', peoplenum:'', enterspace:'',exitspace:'', editable: false },
        { name: '参数5', positionnumber: '值5', peoplenum:'', enterspace:'',exitspace:'', editable: false }
      ],
        params_workerplan: [
        { number: 'AO001', name: 'SJR',grade:'1',position1:'2',position2:'3',position3:'4',line:'5',workplan:'1'},
        { number: '参数5', name: '值5',grade:'1',position1:'2',position2:'3',position3:'4',line:'5',workplan:'1'},
        { number: '参数5', name: '值5',grade:'1',position1:'2',position2:'3',position3:'4',line:'5',workplan:'1'},
        { number: '参数5', name: '值5',grade:'1',position1:'2',position2:'3',position3:'4',line:'5',workplan:'1'},
        { number: '参数5', name: '值5',grade:'1',position1:'2',position2:'3',position3:'4',line:'5',workplan:'1'}
      ],
             params_workerplan_p: [
        { number: '参数5345t', name: '值5',grade:'1',position1:'2',position2:'3',position3:'4',line:'5'},
        { number: '参数523423', name: '值5',grade:'1',position1:'2',position2:'3',position3:'4',line:'5'},
        { number: '参数5423', name: '值5',grade:'1',position1:'2',position2:'3',position3:'4',line:'5'},
        { number: '参数34235', name: '值5',grade:'1',position1:'2',position2:'3',position3:'4',line:'5'},
        { number: '参数532423', name: '值5',grade:'1',position1:'2',position2:'3',position3:'4',line:'5'}
      ],
              params_workerplan_line: [
        { number: 'ergqwgwer', name: '值5',grade:'1',position1:'2',position2:'3',position3:'4',line:'5'},
        { number: 'gfeqrg', name: '值5',grade:'1',position1:'2',position2:'3',position3:'4',line:'5'},
        { number: 'gerqwg', name: '值5',grade:'1',position1:'2',position2:'3',position3:'4',line:'5'},
        { number: '参数3gerg4235', name: '值5',grade:'1',position1:'2',position2:'3',position3:'4',line:'5'},
        { number: 'erhgg', name: '值5',grade:'1',position1:'2',position2:'3',position3:'4',line:'5'}
      ],
            params_material: [
        { name: '参数111', number: '值5',plannedtime:'1',latesttime:'2',unit:'3'},
        { name: '参数5', number: '值5',plannedtime:'1',latesttime:'2',unit:'3'},
        { name: '参数5', number: '值5',plannedtime:'1',latesttime:'2',unit:'3'},
        { name: '参数5', number: '值5',plannedtime:'1',latesttime:'2',unit:'3'},
        { name: '参数5', number: '值5',plannedtime:'1',latesttime:'2',unit:'3'},
      ],
      subpagerenyuan: [
        { gonghao: 'zq001',xingming:'wangmm',zaigangzhuangtai:'zaigang',gongzuozhuangtai:'kongxian',jinengdengji:'4',suozaigangwei:'tongyongmaojie',suozaigongwei:'1',suozaizhanwei:'26A',suozaichanxian:'1' },
        { gonghao: 'zq001',xingming:'wangmm',zaigangzhuangtai:'zaigang',gongzuozhuangtai:'kongxian',jinengdengji:'4',suozaigangwei:'tongyongmaojie',suozaigongwei:'1',suozaizhanwei:'26A',suozaichanxian:'1' },
        { gonghao: 'zq001',xingming:'wangmm',zaigangzhuangtai:'zaigang',gongzuozhuangtai:'kongxian',jinengdengji:'4',suozaigangwei:'tongyongmaojie',suozaigongwei:'1',suozaizhanwei:'26A',suozaichanxian:'1' },

      ],
         subpagezhanwei: [
        { mingcheng: 'zq001',bianhao:'wangmm',zhouqi:'zaigang',zuidarenshu:'kongxian',lixiangrenshu:'4',qianzhizhanwei:'tongyongmaojie',houzhizhanwei:'1'},
        { mingcheng: 'zq001',bianhao:'wangmm',zhouqi:'zaigang',zuidarenshu:'kongxian',lixiangrenshu:'4',qianzhizhanwei:'tongyongmaojie',houzhizhanwei:'1'},
        { mingcheng: 'zq001',bianhao:'wangmm',zhouqi:'zaigang',zuidarenshu:'kongxian',lixiangrenshu:'4',qianzhizhanwei:'tongyongmaojie',houzhizhanwei:'1'},


      ],
         subpageshebei: [
        { mingcheng: 'zq001',xinghao:'wangmm',chanxian:'zaigang',zerenren:'kongxian',guige:'4',changshang:'tongyongmaojie',zhanwei:'1',bianhao:'1',zhuangtai:'1',yichangshijian:'1',yichangmiaoshu:'1'},
        { mingcheng: 'zq001',xinghao:'wangmm',chanxian:'zaigang',zerenren:'kongxian',guige:'4',changshang:'tongyongmaojie',zhanwei:'1',bianhao:'1',zhuangtai:'1',yichangshijian:'1',yichangmiaoshu:'1'},
        { mingcheng: 'zq001',xinghao:'wangmm',chanxian:'zaigang',zerenren:'kongxian',guige:'4',changshang:'tongyongmaojie',zhanwei:'1',bianhao:'1',zhuangtai:'1',yichangshijian:'1',yichangmiaoshu:'1'},


      ],
      subpagezhiliang:[
        { zhanwei: 'zq001',fuzeren:'wangmm',yichangmiaoshu:'zaigang',suoxushijian:'kongxian',yichangzhuangtai:'4',yichangleixing:'tongyongmaojie'},
        { zhanwei: 'zq001',fuzeren:'wangmm',yichangmiaoshu:'zaigang',suoxushijian:'kongxian',yichangzhuangtai:'4',yichangleixing:'tongyongmaojie'},
        { zhanwei: 'zq001',fuzeren:'wangmm',yichangmiaoshu:'zaigang',suoxushijian:'kongxian',yichangzhuangtai:'4',yichangleixing:'tongyongmaojie'},
      ],
            subpagewuliao:[
        { mingcheng: 'zq001',bianhao:'wangmm',zhanwei:'zaigang',shifoubiyao:'kongxian',zhuangtai:'4',shengyushijian:'tongyongmaojie',shengchandanwei:'1'},
        { mingcheng: 'zq001',bianhao:'wangmm',zhanwei:'zaigang',shifoubiyao:'kongxian',zhuangtai:'4',shengyushijian:'tongyongmaojie',shengchandanwei:'1'},
        { mingcheng: 'zq001',bianhao:'wangmm',zhanwei:'zaigang',shifoubiyao:'kongxian',zhuangtai:'4',shengyushijian:'tongyongmaojie',shengchandanwei:'1'},
      ],
      subpagejindu:[
        { mingcheng: 'zq001',bianhao:'wangmm',T:'zaigang',dangqianAO:'kongxian',jixing:'4',dangqianpici:'tongyongmaojie',zuidarenshu:'1',jiaofujiedian:'1',fengxiandengji:'1'},
        { mingcheng: 'zq001',bianhao:'wangmm',T:'zaigang',dangqianAO:'kongxian',jixing:'4',dangqianpici:'tongyongmaojie',zuidarenshu:'1',jiaofujiedian:'1',fengxiandengji:'1'},
        { mingcheng: 'zq001',bianhao:'wangmm',T:'zaigang',dangqianAO:'kongxian',jixing:'4',dangqianpici:'tongyongmaojie',zuidarenshu:'1',jiaofujiedian:'1',fengxiandengji:'1'},


      ],
      subPlans2: [
        { content: '子计划2-内容1' },
        { content: '子计划2-内容2' },
        { content: '子计划2-内容3' },
        { content: '子计划2-内容4' },
        { content: '子计划2-内容5' }
      ],
      subPlans3: [
        { content: '子计划3-内容1' },
        { content: '子计划3-内容2' },
        { content: '子计划3-内容3' },
        { content: '子计划3-内容4' },
        { content: '子计划3-内容5' }
      ],
     
      planData:[
        { helicopterId: 'AC313A-1', model: '普通机型', batch: '2023', startAssemblyTime: '2023.1.3', deliveryDate: '2024.2.15' },
        { helicopterId: 'AC313A-1', model: '普通机型', batch: '2023', startAssemblyTime: '2023.1.3', deliveryDate: '2024.2.15' },
        
      ] ,
      partPlanList: [  
        { componentId: 'FAOG4003', station: '26A', batch: '2023', startAssemblyTime: '2023.1.3', deliveryDate: '2024.1.3'},
        { compomentId: 'FAOG4004', station: '26B', batch: '2023', startAssemblyTime: '2023.1.3', deliveryDate: '2025.1.3'},
      ],
         personnelPlans: [], // 新增，用于存储人员生产计划
      materialPlans: [], // 新增，用于存储物料需求表
      stationPlans: [], // 新增，用于存储站位生产计划
       selectedWorker: {},
       selecteddata_p:[],
       selecteddata_line:[],
      tasks: [
        { id: 1, label: 'Task 1', start: '2022-06-05', end: '2022-06-08' },
        { id: 2, label: 'Task 2', start: '2022-06-06', end: '2022-06-10' }
      ],

           tasks_line_A: [
        { id: 1, label: 'A1', start: '2022-06-05', end: '2022-06-08' },
        { id: 2, label: 'A2', start: '2022-06-06', end: '2022-06-10' }
      ],
            line_tasks : [
        { id: 1, label: 'A1', start: '2022-06-05', end: '2022-06-08' },
        { id: 2, label: 'A2', start: '2022-06-06', end: '2022-06-10' }
      ],
           tasks_line_B: [
        { id: 1, label: 'B1', start: '2022-06-05', end: '2022-06-08' },
        { id: 2, label: 'B2', start: '2022-06-06', end: '2022-06-10' }
      ],           tasks_line_C: [        { id: 1, label: 'C1', start: '2022-06-05', end: '2022-06-08' },
        { id: 2, label: 'C2', start: '2022-06-06', end: '2022-06-10' }
      ],
        loading: false
    };
  },
    watch: {
    selectedLine(newLine) {
        this.loading = true;
      this.updateLineTasks(newLine);
    }
  },
  mounted() {
    this.updateLineTasks(this.selectedLine);
  },


  methods: {
    // getLineTasks(line) {  
    //   return this.linesTasks[line] || []; // 如果没有找到对应的产线，返回一个空数组  
    // }, 
    // 
    exportBOM() {  
      // 显示弹窗  
      this.showAlert = true;
      },
     confirmTimeSpan() {  
      // 这里可以添加将selectedTimeSpan发送到服务器或用于其他逻辑的代码  
      // 这里仅模拟关闭模态窗格并显示计划表（如果需要的话）  
      console.log('选择的时间跨度：', this.selectedTimeSpan);  
      // 假设我们根据选择的时间跨度来显示计划表  
      this.showPlanTables = true; // 取消注释以显示计划表内容（如果有的话）  
      this.ShowTimeSpanModal = false; // 关闭模态窗格  
    }, 
    selectAll(checked) {  
      this.selectedplanDatas = checked ? this.planDatas.map(h => h.id) : [];  
    },  
    // 单个直升机选择  
    selectplandata(id) {  
      const index = this.selectedplanDatas.indexOf(id);  
      if (index === -1) {  
        this.selectedplanDatas.push(id);  
      } else {  
        this.selectedplanDatas.splice(index, 1);  
      }  
    },
    // selectAll(checked) {  
    //   this.selectedpartPlanlists = checked ? this.partPlanlists.map(h => h.id) : [];  
    // },  
    // // 单个直升机选择  
    // selectpartPlanlist(id) {  
    //   const index = this.selectedpartPlanlists.indexOf(id);  
    //   if (index === -1) {  
    //     this.selectedpartPlanlists.push(id);  
    //   } else {  
    //     this.selectedpartPlanlists.splice(index, 1);  
    //   }  
    // },
    prevPlan() {  
      if (this.currentPlan > 1) {  
        this.currentPlan--;  
      }  
    },  
    nextPlan() {  
      if (this.currentPlan < 3) {  
        this.currentPlan++;  
      }  
  },
    getPlanImageUrl(plan){
      return this.planImages[plan-1];
    },

    prevBatch() {  
      if (this.currentBatch > 1) {  
        this.currentBatch--;  
      }  
    },  
    nextBatch() {  
      if (this.currentBatch < 3) {  
        this.currentBatch++;  
      }  
    }, 
     getLandscapeImageUrl(batch) {  
      // 根据批次返回对应的图片URL  
      return this.landscapeImages[batch - 1];  
    }  ,
    updateLineTasks(line) {
      switch(line) {
        case 'A':
          this.line_tasks = this.tasks_line_A;
          break;
        case 'B':
          this.line_tasks = this.tasks_line_B;
          break;
        case 'C':
          this.line_tasks = this.tasks_line_C;
          break;
      }
      this.loading = false;
    },
       exportToExcel(data) {
      const headers = Object.keys(data[0]); // 获取数据的键作为表头
      const adjustedData = data.map(obj => Object.values(obj));
      adjustedData.unshift(headers); // 将表头添加到数据的第一行

      const worksheet = XLSX.utils.aoa_to_sheet(adjustedData);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      const url = URL.createObjectURL(blob);

      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'exported_data.xlsx');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    showdetailedinformationa(){
    this.isModalVisible_a = true;  
    },
  
  showdatatable(){
    this.selecteddata_p = this.params_workerplan_p;
    
       this.isModalVisible_p = true;
  },
    showdatatable_line(){
    this.selecteddata_line = this.params_workerplan_line;
    
       this.isModalVisible_line = true;
  },
        showdetailedinformation(index) {
      this.selectedWorker = this.params_workerplan[index];
      this.isModalVisible = true;
    },

    viewPage(page) {
      this.currentView = page;
      if (page === 'adjustParams'){
          this.data = this.params
      }else if(page === 'generatePlan'){
          this.data = this.subpagerenyuan
      }
    },
    viewSubPage(subPage) {
      this.currentSubView = subPage;
      this.updateSubPlanData();
    },
      viewPlan(planType) {
      if (planType === 'production') {
        this.currentView = 'viewPlan';
      } else if (planType === 'station') {
        this.currentView = 'viewStationPlan';
    
      } else if (planType === 'personnel') {
        this.currentView = 'viewPersonnelPlan';
          this.data = this.params_workerplan
      } else if (planType === 'material') {
        this.currentView = 'viewMaterialPlan';
          this.data = this.params_material;
          console.log(this.data)
      }
    },
    savePlan() {
      console.log('Plan saved and updated');
    },
    generateReport() {
      console.log('Report generated');
    },
    cancel() {
      console.log('Operation cancelled');
    },
    editParam(index) {
      this.$set(this.params[index], 'editable', true);
    },
    saveParam(index) {
      this.$set(this.params[index], 'editable', false);
    },
    async fetchData() {
      try {
        const response = await axios.get('http://localhost:8000/api/user/query');
        //这个地方是数据库的读数据接口，暂时没有接，如有需要可完善
        if (response) {
          this.params = response.data.map(item => ({
            name: item.number,
            value: item.name,
            editable: false
          }));
          this.data = this.params;
          this.updateCurrentData();
        } else {
          alert('Failed to fetch data.');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },
    async submitData() {
      try {
        const response = await axios.post('http://localhost:8000/api/user/update', this.params);
              //这个地方是数据库的提交接口，暂时没有接，如有需要可完善
        if (response) {
          alert('Data submitted successfully.');
        } else {
          alert('Failed to submit data.');
        }
      } catch (error) {
        console.error('Error submitting data:', error);
      }
    },
    updateSubPlanData() {
      if (this.currentSubView === 'subpagerenyuan') {
        this.data = this.subpagerenyuan;
      } else if (this.currentSubView === 'subpagezhanwei') {
        this.data = this.subpagezhanwei;
      } else if (this.currentSubView === 'subpageshebei') {
        this.data = this.subpageshebei;
      } else if (this.currentSubView === 'subpagezhiliang') {
        this.data = this.subpagezhiliang;
      } else if (this.currentSubView === 'subpagewuliao') {
        this.data = this.subpagewuliao;
      } else if (this.currentSubView === 'subpagejindu') {
        this.data = this.subpagejindu;
      } else if (this.currentSubView === 'subpagekuadu') {
        this.data = this.subpagekuadu;
      }
      this.updateCurrentData();
    },
 
  },
  created() {
    this.data = this.params;
    this.updateCurrentData();
  }
};
</script>

